<template>
    <div class="wangeditor">
        <Toolbar style="border-bottom: 1px solid #eee" :editor="editorRef" :default-config="toolbarConfig"
            :mode="mode" />
        <div style="flex: 1;overflow: hidden;">
            <Editor v-model="valueHtml" :style="`height: 100%; overflow-y: auto;`" :default-config="editorConfig"
                :mode="mode" @onCreated="handleCreated" />
        </div>
    </div>

</template>

<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { ref, shallowRef, onBeforeUnmount } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
    components: {
        Editor,
        Toolbar
    },
    setup(props) {

        // 编辑器实例，必须用 shallowRef
        const editorRef = shallowRef()

        // 内容 HTML
        const valueHtml = ref('')
        const editorConfig = { placeholder: '请输入内容...' }
        const toolbarConfig = {}

        // 组件销毁时，也及时销毁编辑器
        onBeforeUnmount(() => {
            const editor = editorRef.value
            if (editor == null) return
            editor.destroy()
        })

        const handleCreated = (editor) => {
            editorRef.value = editor // 记录 editor 实例，重要！
        }

        const setHtml = (val) => {
            const editor = editorRef.value
            editor.dangerouslyInsertHtml(val)
        }
        const resetHtml = (val) => {
            const editor = editorRef.value
            editor.setHtml(val || '')
        }
        return {
            editorRef,
            valueHtml,
            editorConfig,
            toolbarConfig,
            handleCreated,
            mode: 'default',
            setHtml,
            resetHtml
        }
    }
}
</script>

<style lang="scss" scoped>
.wangeditor {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.info {
    flex: 1;
    text-align: center;
    padding: 10px;
    animation: color-change 2s linear infinite alternate both;
    color: #fff;
}

.edit {
    width: 48%;
}

.show {
    width: 48%;
    background-color: #fff;
    height: inherit;
}

.body {
    padding: 10px;
}

.title {
    font-size: 18px;
    margin: 10px 40px;
    position: relative;

    &::before {
        content: '';
        width: 4px;
        position: absolute;
        left: -20px;
        top: 0;
        bottom: 0;
        border-radius: 10px;
        background-color: #0d84ff;
    }
}

.flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 20px;
    height: calc(100vh - 128px);
}

.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #4a7ce5 !important;
}

@keyframes color-change {
    0% {
        background: #48b1ff;
    }

    100% {
        background: #0396FF;
    }
}
</style>